import React, {useRef, useState} from "react";
import {ActionType, ProCard, ProColumns, ProTable} from "@ant-design/pro-components";
import {Alert, Descriptions, message, Space, Tag} from "antd";
import {API} from "@/services/typings";
import {addProductArea, pageProductArea} from "@/pages/organization/product-area/service";
import ProductAreaModal from "@/pages/organization/product-area/components/ProductAreaModal";
import {pageOperLog} from "@/pages/system/oper-log/service";
import OperLogDetial from "@/pages/system/oper-log/components/OperLogDetial";


// 状态标签渲染
const StatusTag: React.FC<{ status: number }> = ({status}) => (
  <Tag color={status === 0 ? 'success' : 'error'}>
    {status === 0 ? '正常' : '异常'}
  </Tag>
);

// 业务类型标签
const BusinessTypeTag: React.FC<{ type: number }> = ({type}) => {
  const typeMap = {
    0: {text: '其它', color: 'default'},
    1: {text: '新增', color: 'blue'},
    2: {text: '修改', color: 'orange'},
    3: {text: '删除', color: 'red'},
    4: {text: '授权', color: 'default'},
    5: {text: '导出', color: 'green'},
    6: {text: '导入', color: 'blue'},
    7: {text: '强退', color: 'default'},
    8: {text: '生成代码', color: 'default'},
    9: {text: '清空数据', color: 'default'},
  };
  return <Tag color={typeMap[type as keyof typeof typeMap]?.color || 'default'}>
    {typeMap[type as keyof typeof typeMap]?.text || '-'}
  </Tag>;
};

// 操作人类别标签
const OperatorTypeTag: React.FC<{ type: number }> = ({type}) => {
  const typeMap = {
    0: {text: '其它', color: 'default'},
    1: {text: '后台', color: 'purple'},
    2: {text: '移动端', color: 'cyan'}
  };
  return <Tag color={typeMap[type as keyof typeof typeMap].color}>
    {typeMap[type as keyof typeof typeMap].text}
  </Tag>;
};


const OperLog: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [selectedRow, setSelectedRow] = useState<API.IOperLog | null>(null);
  const [modalVisible, setModalVisible] = useState<boolean>(false);


  const columns: ProColumns<API.IOperLog>[] = [
    {
      title: '模块',
      dataIndex: 'title',
      key: 'title',
      width: 150,
      ellipsis: true,
      render: (text) => <a>{text}</a>
    },
    {
      title: '类型',
      dataIndex: 'businessType',
      key: 'businessType',
      width: 60,
      filters: true,
      valueEnum: {
        0: {text: '其它'},
        1: {text: '新增'},
        2: {text: '修改'},
        3: {text: '删除'}
      },
      render: (_, record) => <BusinessTypeTag type={record.businessType}/>
    },

    {
      title: '请求方式',
      dataIndex: 'requestMethod',
      key: 'requestMethod',
      width: 60,
      valueEnum: {
        GET: {text: 'GET'},
        POST: {text: 'POST'},
        PUT: {text: 'PUT'},
        DELETE: {text: 'DELETE'}
      },
      render: (text) => <Tag color={text === 'GET' ? 'green' :
        text === 'POST' ? 'blue' :
          text === 'PUT' ? 'orange' : 'red'}>{text}</Tag>
    },
    {
      title: '操作人',
      dataIndex: 'operName',
      key: 'operName',
      width: 60,
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 60,
      filters: true,
      valueEnum: {
        0: {text: '正常', status: 'Success'},
        1: {text: '异常', status: 'Error'}
      },
      render: (_, record) => <StatusTag status={record.status}/>
    },
    {
      title: '耗时',
      dataIndex: 'costTime',
      key: 'costTime',
      width: 60,
      sorter: true,
      search: false,
      render: (text) => <span style={{color: (text as any) > 1000 ? '#ff4d4f' : '#52c41a'}}>
      {text}
    </span>
    },
    {
      title: '类别',
      dataIndex: 'operatorType',
      key: 'operatorType',
      width: 60,
      filters: true,
      valueEnum: {
        0: {text: '其它'},
        1: {text: '后台'},
        2: {text: '移动端'}
      },
      render: (_, record) => <OperatorTypeTag type={record.operatorType}/>
    },
    {
      title: 'IP地址',
      dataIndex: 'operIp',
      key: 'operIp',
      width: 120,
      render: (text) => <Tag>{text}</Tag>
    },
    {
      title: '请求地址',
      dataIndex: 'operUrl',
      key: 'method',
      width: 200,
      ellipsis: true,
      search: false,
      render: (text) => <span title={text as any}>{text}</span>
    },
    {
      title: '操作时间',
      dataIndex: 'operTime',
      key: 'operTime',
      width: 180,
      valueType: 'dateTime',
      sorter: true,
      renderText: (text) => new Date(text).toLocaleString()
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 80,
      render: (text, record, _, action) => [
        <a
          key="show"
          onClick={() => {
            setModalVisible(true);
          }}
        >
          详情
        </a>
      ],
    }
  ]

  return <ProCard
    style={{minHeight: '72vh'}}
    title="操作日志"
    bordered
    headerBordered
  >
    <ProTable<API.IOperLog, API.PageParams>
      actionRef={actionRef}
      rowKey="id"
      search={{
        filterType: 'light',
      }}
      onRow={(record: any) => {
        return {
          onClick: () => {
            setSelectedRow(record);
          },
        };
      }}
      rowSelection={{
        type: 'radio',
        selectedRowKeys: selectedRow ? [selectedRow.id] : [],
        onChange: (_, rows) => setSelectedRow(rows[0])
      }}
      pagination={{
        pageSize: 15,
      } as any}
      scroll={{x: 1000}}
      request={async (params, sort, filter) => {
        const {data} = await pageOperLog(params)
        return data
      }}
      tableAlertRender={false}
      size={'middle'}
      columns={columns}
    />
    {
      selectedRow && <OperLogDetial
        onClose={() => {
          setModalVisible(false);
        }}
        visible={modalVisible}
        operLog={selectedRow}
      />
    }
  </ProCard>;
};

export default OperLog;

